<template>
  <div>
    <div class="page-title">{{ $route.meta.title }}</div>
    <div class="know-container">
      <data-tables
        v-loading="loading"
        :data="ShowData"
        :table-props="tableProps"
        align="left"
        :show-action-bar="false"
        :custom-filters="customFilters"
        :pagination-def="paginationDef"
      >
        <el-row
          v-show="isAdmin"
          slot="custom-tool-bar"
          style="margin-bottom: 10px"
          class="class_el_row"
        >
          <el-col :span="24" class="text-align-left">
            <el-input
              v-model="reinstall"
              type="number"
              max="1"
              min="0"
              prefix-icon="el-icon-search"
              placeholder="是否重新安装，0表示不重新安装，1表示重新安装"
              class="class_input_width"
              @change="LimitRate()"
            ></el-input>
            <el-input
              v-model="reinstallTime"
              width=100
              type="number"
              prefix-icon="el-icon-search"
              placeholder="重新安装的时间标记，例如20190423"
              class="class_input_width"
            ></el-input>

            <datepickers></datepickers>
            <el-button type="primary" @click="goSetting">设置</el-button>
          </el-col>
        </el-row>

        <el-row
          v-show="isAdmin"
          slot="custom-tool-bar"
          style="margin-bottom: 10px"
          class="class_el_row"
        >
          <el-col :span="24" class="text-align-left">
            <el-input
              v-model="queryUeserName"
              prefix-icon="el-icon-search"
              placeholder="搜索账户名"
              class="class_input_width"
            ></el-input>
            <datepickers></datepickers>
            <el-button type="primary" @click="goSeed">查询</el-button>
          </el-col>
        </el-row>
        <el-table-column prop="UserID" label="客户" key="UserID" sortable="custom"></el-table-column>
        <el-table-column prop="Num" label="数量" key="Num" sortable="custom"></el-table-column>
        <el-table-column prop="DataDate" label="统计时间" key="DataDate" sortable="custom"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="operation_box" v-show="isAdmin"  >
              <span @click="clientdetails(scope.row)">安装详细</span>
              <!-- <span @click="edit(scope.row)">编辑</span>
              <span @click="deletes(scope.row)">删除</span>-->
            </div>
          </template>
        </el-table-column>
      </data-tables>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import api from "@/utils/api";

export default {
  components: {},
  data() {
    return {
      isAdmin: false,
      ShowData: [],
      queryUeserName: "",
      queryStart: 0,
      queryEnd: 0,
      loading: false,
      reinstall:0,
	    reinstallTime:0,
      tableProps: {
        border: false, //去掉边框
        stripe: false //去掉斑马纹
      },
      customFilters: [
        {
          vals: "",
          props: ["DisplayName", "Name"]
        },
        {
          vals: []
        },
        {
          vals: []
        },
        {
          vals: []
        },
        {
          vals: []
        }
      ],
      //分页设置
      paginationDef: {
        pageSize: 10,
        pageSizes: [10, 20, 50]
      },
      dialogVisible: false,
      save_id: null,
      //存放弹出框的数据
      colshowlog: {}
    };
  },
  computed: {
    ...mapState(["StatisticsData", "UserProfile", "ReinstallData"])
  },
  methods: {
    ...mapActions(["getStatistics", "getUserProfile", "getReinstall"]),
    deletes(row) {
      // this.$confirm('真的要删除此权限吗？', '删除', {
      // 	confirmButtonText: '确定',
      // 	cancelButtonText: '取消',
      // 	type: 'warning'
      // }).then(async () => {
      // 	this.loading = true
      // 	const data = await api.deletePermissions(row.ID)
      // 	if(data.status) {
      // 		this.$message({
      // 			message: data.msg,
      // 			type: 'success'
      // 		})
      // 	} else {
      // 		this.$message.error(data.msg)
      // 	}
      // 	this.getData()
      // 	this.loading = false
      // }).catch(() => {
      // })
    },
    details(scope) {
      this.colshowlog = scope.row;
      this.previewcol = true;
    },
    async getData() {
      await this.getReinstall();
      this.reinstall=this.ReinstallData.reinstall
      this.reinstallTime=this.ReinstallData.reinstallTime

      if (this.StatisticsData.length == 0) {
        this.loading = true;
      }
      if (this.UserProfile.length == 0) {
        await this.getUserProfile();
      }
      await this.getStatistics();
      this.loading = false;

      this.ShowData = this.StatisticsData;

      if (
        this.UserProfile.Role.Name == "Manager" ||
        this.UserProfile.Role.Name == "SuperManager"
      ) {
        this.isAdmin = true;
      }
    },
    //查询
    goSeed() {
      if (this.queryUeserName != "") {
        this.ShowData = [];
        for (var i = 0; i < this.StatisticsData.length; i++) {
          if (this.StatisticsData[i].UserID == this.queryUeserName) {
            this.ShowData.push(this.StatisticsData[i]);
          }
        }
      } else {
        this.ShowData = this.StatisticsData;
      }
    },
    //设置
    goSetting() {
      this.loading = true;
      if (this.reinstall >1) {
        this.reinstall=1;
      }
      if (this.reinstall<0) {
        this.reinstall=0;
      }
      var form={
         reinstall:this.reinstall,
	      reinstallTime:this.reinstallTime
      }
      const data = api.putReinstall(form);
      this.$message({
          type: "info",
          message: "设置成功"
        });
      this.loading = false;
    },
    LimitRate:function(){
      if(this.reinstall>1)
      {
        this.reinstall=1
      }
      if(this.reinstall<0)
      {
        this.reinstall=0
      }
    },
    edit(row) {
      this.$router.push({
        name: "EditPermissions",
        params: {
          id: row.ID
        }
      });
    },
    clientdetails(row) {
      this.$router.push({
        name: "InstallDetails",
        params: {
          id: row.ID
        }
      });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.AddGroup {
  color: rgb(60, 152, 255);
  font-size: 14px;
  margin-top: 10px;
  cursor: pointer;
  &-div {
    margin-top: 10px;
    &-input {
      width: 40%;
    }
    &-add {
      color: rgb(60, 152, 255);
      font-size: 14px;
      margin-top: 10px;
      cursor: pointer;
      margin-left: 15px;
    }
  }
}

.class_input_width {
  width: 350px;
}

.operation_box span {
  cursor: pointer;
  color: #8e9ebb;
  margin-right: 10px;
}
</style>
